@page "/qrcode"
@page "/docs/guides/components/qrcode.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    QRCode
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Generate and display QR codes as SVG using <strong>RadzenQRCode</strong>.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase QR code generation with customizable <code>Value</code> property for encoding data, and styling options including foreground/background colors, module and eye shapes, eye colors, and size configuration.
</RadzenText>

<RadzenText Anchor="qrcode#basic" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Basic
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Value</code> property to specify the data to encode in the QR code.
</RadzenText>
<RadzenExample ComponentName="QRCode" Example="QRCodeBasic">
    <QRCodeBasic />
</RadzenExample>

<RadzenText Anchor="qrcode#styled" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Styled
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize the QR code appearance with <code>Foreground</code>, <code>Background</code>, <code>ModuleShape</code>, <code>EyeShape</code>, <code>EyeColor</code> and <code>Size</code> properties.
</RadzenText>
<RadzenExample ComponentName="QRCode" Example="QRCodeStyled">
    <QRCodeStyled />
</RadzenExample>

